<template>
  <view class="content">
    <section class="section">
      <form class="sms-form">
        <uni-notice-bar
          show-icon
          scrollable
		  :speed="20"
          :text="notice"
          class="sms-notice nowrap"
        />

        <view class="sms-title">
          联系方式
          <text @click="showExplain('explain')">注意事项</text>
        </view>
        <view class="sms-input">
          <uni-data-select
            v-model="selectedAppId"
            :localdata="appOptions"
            @change="onAppChange"
            placeholder="点击选择社交软件"
            mode="none"
            style="font-size: 54px"
          ></uni-data-select>
        </view>
        <view class="sms-input">
          <input
            type="text"
            v-model="formData.mobile"
            placeholder="Ta的社交账号"
            clearble="true"
          />
          <view class="input-wrap"> </view>
        </view>
        <view class="sms-input">
          <uni-datetime-picker
            type="datetime"
            v-model="formData.plan_time"
            @change="showDatePicker"
            :border="false"
          />
        </view>
        <view class="sms-tips">
          <image src="/static/image/icon_06.png" />
          选择了指定时间，我们将在指定时间的±1小时内送达，不保证100%准时
        </view>
        <view style="text-align: center; font-size: 14px"
          >传话记录可在 我的-人工传话 内查看</view
        >

        <view class="sms-edit-flex">
          <view class="sms-edit-title">
            <h4>传话的内容</h4>
          </view>
          <text class="sms-edit-span" @click="showExplain('wenan')"
            >使用内置文案</text
          >
        </view>
        <view class="sms-edit-block">
          <image
            class="sms-edit-back"
            src="/static/image/img_05.png"
            alt="back"
          ></image>
          <image
            class="sms-edit-circle"
            src="/static/image/img_01.png"
            alt="圆"
          ></image>
          <textarea
            id="smsText"
            v-model="formData.content"
            class="sms-edit-textarea"
            maxlength="500"
            placeholder="点击输入传话的内容（情感、表白、早晚安、道歉、祝福...）"
          ></textarea>
          <view class="sms-textarea-tool">
            <view>
              <text id="smsTextLength">{{ formData.content.length }}/500</text>
              <text id="price" style="color: #17c304"
                >人工传话价格：{{ priceText }}</text
              >
            </view>
          </view>
        </view>
        <view class="sms-edit-block">
          <image
            class="sms-edit-circle"
            src="/static/image/img_01.png"
            alt="圆"
          ></image>
          <textarea
            id="other"
            v-model="formData.remak"
            class="sms-edit-textarea"
            maxlength="300"
            placeholder="可以备注一些小要求(最多300字)，我们将在力所能及的情况下可以帮你完成。例如Ta的称呼、在线时间、在线习惯等"
          ></textarea>
        </view>
        <view class="sms-tips">
          <image src="/static/image/icon_06.png" />
          如需传递照片、视频、文件等内容，请联系客服：
          <text id="kefu">{{ kefu }}</text>
        </view>

        <view class="sms-btn">
          <button type="button" style="background: #17c304" @click="submitForm">
            <image src="/static/image/icon_13.png" />提交传话
          </button>
        </view>
      </form>
    </section>

    <uni-popup
      ref="popup"
      type="center"
      :mask-click="true"
      @change="onPopupClose"
    >
      <view class="popup-content">
        <view class="popup-header">
          {{ popupTitle }}
          <text class="close-icon" @click="closePopup">×</text>
        </view>
        <scroll-view
          class="popup-body"
          v-if="popupType === 'explain'"
          scroll-y="true"
        >
          <view class="explain-lay-item">
            <h4>1.多久可以传话完成?</h4>
            <p>
              传话将在你选择"传话日期"内完成，如对方不同意好友，等其他原因导致无法传达到，将可以退款。
            </p>
          </view>
          <view class="explain-lay-item">
            <h4>2.怎么查看传话反馈?</h4>
            <p>传话状态情况后可以在"我的"->"人工传话"中查看反馈结果。</p>
          </view>
          <view class="explain-lay-item">
            <h4>3.可以传递音频和照片吗?</h4>
            <p>
              如需传递音频照片视频等内容，请添加客服进行说明，并提供订单号。
            </p>
          </view>
        </scroll-view>
        <scroll-view
          class="popup-body"
          v-if="popupType === 'wenan'"
          scroll-y="true"
        >
          <view class="wenan-list">
            <view
              class="wenan-item"
              v-for="(item, index) in wenanList"
              :key="index"
              @click="selectWenan(item)"
            >
              {{ item }}
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
	
	import { 
		getNotice, 
		getSoftList,
		sendContent,
		payMoney
	} from '@/api/index'
export default {
  data() {
    return {
      notice: '暂无公告',
      kefu: '',
      appOptions: [],
      selectedAppId: null,
      selectedApp: {},
      formData: {
        mobile: '',
        plan_time: '',
        content: '',
        remak: ''
      },
      priceText: '请先选择社交软件',
      popupType: '',
      popupTitle: '',
      wenanList: [],
      hdata: null,
      user: null
    }
  },
  onShow() {
	this.getNotice()
	this.getSoftList()
  },
  onLoad() {
    // this.getSettings();
    uni.setNavigationBarTitle({
      title: '人工传话',
    });
  },
  methods: {
	// 获取公告
	getNotice() {
	const params = {
		type: 2
	}
	getNotice(params).then(res => {
		const { code, data } = res;
		if (code === 200) {
			this.notice = data.content || '';
		}
		
	})
	},
	// 获取渠道列表
	getSoftList() {
	  getSoftList().then(res => {
		  console.log(999, res)
		  const { code, data } = res;
		  this.appOptions = data.records.map(item => {
			  const { id, channelId, name, price } = item
			  return {
				  value: id,
				  text: name,
				  price
			  }
		  })
	  })
	},
	sendContent() {
		const currentSelect = this.appOptions.find(item => this.selectedAppId = item.value)
		const { value, price } = currentSelect
		const data = {
			channelId: value,
			receiver: this.formData.mobile,
			content: this.formData.content,
			time: this.formData.plan_time,
			remak: this.formData.remak
		}
		console.log(223322, data)
		sendContent(data).then(res => {
			const { code, data } = res
			if (code === 200) {
				console.log(data.orderID)
				const payData = {
					money: `${price}`,
					trade_no: `${data.orderID}`
				}
				payMoney(payData).then(payRes => {
					console.log(4356, res)
					console.log('支付接口返回:', payRes);
					// 这里可以根据支付接口返回的结果进行处理
					if (payRes.code === 200) {
						const url = payRes.data.pay_info
						uni.navigateTo({
							url: `/pages/webview/index?title=支付&url=${url}`
						});
					}
				})
			}
		})
	},

    async getSettings() {

      setTimeout(() => {

        this.notice = '欢迎使用人工传话服务，请按照要求填写信息';
        this.kefu = 'kefu123';
        this.appOptions = [
          { value: 1, text: '微信', messagePrice: 100 },
          { value: 2, text: 'QQ', messagePrice: 200 },
          { value: 3, text: '钉钉', messagePrice: 300 }
        ];
      }, 500);

    },
    onAppChange(e) {

      const selectedValue = e;

      this.selectedApp = this.appOptions.find(option => option.value === selectedValue) || {};
      const price = this.selectedApp.messagePrice ? this.selectedApp.messagePrice / 100 : 0;
      this.priceText = price > 0 ? `${price}元/次` : '请先选择社交软件';
    },

    // 显示日期选择器
    showDatePicker(e) {
      this.formData.plan_time = e
    },


    showExplain(type) {
      this.popupType = type;
      if (type === 'explain') {
        this.popupTitle = '注意事项';
      } else if (type === 'wenan') {
        this.popupTitle = '使用内置文案';
      }

      this.$refs.popup.open();
    },


    closePopup() {
      this.$refs.popup.close();
    },


    onPopupClose(e) {
      if (!e.show) {
        this.popupType = '';
      }
    },

    // 选择文案
    selectWenan(content) {
      // this.formData.content = content;
      this.closePopup();
    },

    // 提交表单
    submitForm() {

      if (!this.selectedApp.value) {
        uni.showToast({
          title: '请选择社交软件',
          icon: 'none'
        });
        return;
      }

      if (!this.formData.mobile) {
        uni.showToast({
          title: '请输入Ta的社交账号',
          icon: 'none'
        });
        return;
      }

      if (!this.formData.content) {
        uni.showToast({
          title: '请输入传话内容',
          icon: 'none'
        });
        return;
      }
	  
	  
	  this.sendContent()

    }
  }
}
</script>
<style lang="scss" scoped>
@import url("/static/css/style.css");
section {
  width: 100%;
}
.content {
  background-color: #f6f6f6;
  min-height: 100vh;
}
::v-deep .uni-select__input-placeholder {
  font-size: 14px;
}
.sms-notice {
  display: flex;
  align-items: center;
  background: rgb(231, 236, 237);
  margin-bottom: 20rpx;
}

.sms-notice image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.marquee {
  flex: 1;
  white-space: nowrap;
}

.sms-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  font-weight: bold;
}

.sms-title text {
  color: #4286c8;
  font-size: 12px;
}

.sms-input {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.sms-input input,
.sms-input picker {
  width: 100%;
  height: 44px;
  padding: 0 15rpx;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  background: #fff;
  border-radius: 10rpx;
}

.sms-tips {
  display: flex;
  align-items: flex-start;
  padding: 0 40rpx;
  margin-bottom: 20rpx;
  font-size: 10px;
  color: #999;
}

.sms-tips image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
  flex-shrink: 0;
  margin-top: 8rpx;
}

.sms-edit-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 0rpx 40rpx;
  margin-top: 20rpx;
}

.sms-edit-title h4 {
  margin: 0;
}

.sms-edit-span {
  color: #333;
  font-size: 12px;
}

.sms-edit-block {
  position: relative;
  padding: 20rpx;
}

.sms-edit-back {
  position: absolute;
  top: 120rpx;
  right: 20rpx;
  width: 140rpx;
  height: 126rpx;
  z-index: 2;
}

.sms-edit-circle {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  z-index: 2;
}

.sms-edit-textarea {
  width: 100%;
  height: 200rpx;
  padding: 30rpx 20rpx 20rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10rpx;
  border: none;
  outline: none;
  font-size: 14px;
}

.sms-textarea-tool {
  display: flex;
  justify-content: start;
  padding-top: 10rpx;
}

.sms-textarea-tool view {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.sms-textarea-tool text {
  font-size: 12px;
  color: #999;
}

#price {
  margin-top: 10rpx;
}

.sms-btn {
  padding: 20rpx;
  text-align: center;
}

.sms-btn button {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 16px;
}

.sms-btn button image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}

/* 弹窗样式 */
.popup-content {
  width: 90vw;
  max-height: 80vh;
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  font-weight: bold;
}

.close-icon {
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.popup-body {
  padding: 20rpx;
  max-height: 60vh;
}

.explain-lay-item {
  margin-bottom: 20rpx;
}

.explain-lay-item h4 {
  margin: 0 0 10rpx 0;
  color: #333;
}

.explain-lay-item p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.wenan-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.wenan-item {
  padding: 20rpx;
  background: #f6f6f6;
  border-radius: 10rpx;
  font-size: 14px;
  line-height: 1.5;
}

.picker {
  line-height: 44px;
  padding: 0 15rpx;
  background: #fff;
  border-radius: 10rpx;
  color: #999;
}

.picker[selected] {
  color: #333;
}
</style>